<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>thumb</title>

<link rel="stylesheet" href="../styles/uigg.css">

<script src="../js/jquery.min.js"></script>
<script src="../js/uigg.js"></script>
</head>

<body center>

<style>
    section {background-color: white;padding: 10px;}
    a {margin: 5px;}
    [color=green] {background-color: var(--green);}
    [color=orange] {background-color: var(--orange);}
    [color=sapphire] {background-color: var(--sapphire);}
</style>

<!----------------------------------------------------------------------------------------->

<section>
    <a class="btn" color="green">green</a>
    <a class="btn" color="orange">orange</a>
    <a class="btn" color="sapphire">sapphire</a>
</section>

<!----------------------------------------------------------------------------------------->

<script>
    $('a').click(function(){
        let color = $(this).attr('color')
        $('body').attr('color',color)
        setCookie('color',color,'72')
    })
    $('body').attr('color',getCookie('color'))
</script>

</body>
</html>